<template>
  <div class="register">
    <van-form
      @validate-first="true"
      @failed="onFailed"
      class="form_login"
      validate-trigger="onSubmit"
      @submit="register"
    >
      <div class="reg-head">
        <div class="title">新用户注册</div>
        <div class="sub-title">亲，欢迎注册账号</div>
      </div>
      <van-field
        v-model="value1"
        name="pattern"
        class="user"
        placeholder="请输入手机号或邮箱"
        :rules="[{ pattern, message: '请输入正确格式' }]"
      />
      <van-field
        v-model="value2"
        name="validator"
        type="password"
        class="password"
        placeholder="请输入密码"
        :rules="[{ validator, message: '密码为6-18位,且同时有数字和字母' }]"
      />
      <div style="margin: 40px 0px" class="button">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="linear-gradient(to right, #ff9000, #ff5000)"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
// import { Toast } from 'vant'
export default {
  data() {
    return {
      value1: '17763694576',
      value2: '123456a',
      pattern: /^[1][3,4,5,7,8][0-9]{9}$/ || /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
      user: JSON.parse(localStorage.user || '[]')
    }
  },
  methods: {
    validator(val) {
      return /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$/.test(val)
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    register() {
      const user = {
        username: this.value1,
        password: this.value2
      }
      this.$store.commit('register/REGISTER', user)
    }
  }
}
</script>
<style lang="scss" scoped>
.register {
  margin-bottom: 20px;
  padding: 0 20px;
  .form_login {
    .reg-head {
      margin: 20px 0 40px;
      .title {
        margin-top: 20px;
        font-size: 30px;
        color: #333;
      }
      .sub-title {
        margin-top: 12px;
        font-size: 16px;
        color: #999;
      }
    }
    .user,
    .password {
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
  }
}
</style>